<template>
  <!-- <div class="app-container"> -->
    <div class="mapDiv" v-loading="loading">
      <!--地图-->
      <IndexMap v-if="completeRefreshData==true"
                   @getMap="getMap"
      ></IndexMap>
      <!--工具条控件-->
      <ControlToolBar v-if="completeRefreshData==true"
                      :map="map" :pageType="pageType"
                      :dataType="dataTypeInfluence"
                      :influenceFieldGeomList="influenceFieldGeomList"
                      @showImgcreate="showImgcreate"
                      @seismicInfluenceSelect="seismicInfluenceSelect"
      ></ControlToolBar>
      <!--超图图层显示-->
      <SuperMapLayer v-if="completeMapBool==true"
                     :map="map" :layerDataTypeList="layerDataTypeList"
                     :taskGeom="form.coordinateRange"
                     :resetClearAllBool="resetClearAllBool"
                     :clickLonLat="clickLonLat"
      ></SuperMapLayer>
      <drawingView :open="plotDialog" :formParams="formParams" :title="title" @closeDialog="closeDialog" />
    </div>
  <!-- </div> -->
</template>

<script setup>
//地图
import IndexMap from '@/map/buildingRiskZoning/overallRiskZonation/indexMap.vue';
import ControlToolBar from '@/map/components/controlToolBar/map.vue';
import SuperMapLayer from '@/map/components/superMapLayer/index.vue';
import drawingView from '@/map/components/drawingView/index.vue';
import { getInfluencefliedById } from '@/api/basicDataManage/earthquakeImpactField.js'

const { proxy } = getCurrentInstance();
const router = useRouter();
const props = defineProps(['dataType','form']);
const loading = ref(false);
const pageType = ref("综合风险区划页面");
const plotDialog = ref(false)
const title = ref('')

const data = reactive({
  //图层数据类别code和url列表
  layerDataTypeList:[
    {
      //综合风险区划
      level2DataType:"overallRiskZonation",//数据类别二级code
      level3DataType:"overallRiskZonation",//数据类别三级code
      versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
      tifFileName:null,//tif文件名称
    }
  ],
  formParams:{}
})
const { layerDataTypeList,formParams } = toRefs(data)

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
//地图对象
const map = ref(null);
const completeMapBool = ref(false);//是否完成加载地图
const getMap = (obj)=>{
  map.value = obj;
  completeMapBool.value = true
}
const resetClearAllBool = ref(false);//是否清空全部超图图层
//点击地图经纬度
const clickLonLat = ref([]);
//传递点击地图经纬度
const getClickLonLat = (lonlat) =>{
  clickLonLat.value = lonlat;
}
const closeDialog = (bool)=>{
  plotDialog.value = false;
}
function showImgcreate() {
  plotDialog.value = true
  formParams.value.taskId = props.form.id
  formParams.value.dataType = '1'
  formParams.value.qhType = '1'
  if(props.dataType == 'overallRiskZonation') {// 综合风险-确定评估
    title.value = '综合风险区划-确定评估'
    formParams.value.assessType = '0'
    formParams.value.seismicInputMode = props.form.seismicInputMode
    formParams.value.condition = props.form.condition0
  }else{// 经济损失-确定评估
    formParams.value.assessType = '1'
    title.value = '综合风险区划-概率评估'
    formParams.value.year = props.form.years
  }
}
/*地图传参end*/

//根据类型显示超图图层
function showLayerByDataType(type,form){
  let sqlFilter = "";
  if(type){
    if(type = 'overallRiskZonation') {
      if(form.assessType == '0') {
        if(form.seismicInputMode1 == '0') {
          sqlFilter += " task_id = '" + form.id + "' and type ='" + form.condition0 + "'"
        }else if(form.seismicInputMode1 == '1') {
          sqlFilter += " task_id = '" + form.id + "' and type ='" + form.condition1 + "'"
        }else{
          sqlFilter += " task_id = '" + form.id + "' and type ='" + form.influenceFieldVersion + "'"
        }
      }else{
        sqlFilter += " task_id = '" + form.id + "' and type ='" + form.years + "'"
      }
    }else{
      if(sqlFilter){
        //
      }else{
        sqlFilter = "全部";
      }
    }
    //设置图层数据版本
    setLayerVersion(type,sqlFilter);
  }
}

//设置图层数据
function setLayerVersion(type,sqlFilter){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level3DataType==type){
      list[i].versionCode = sqlFilter;
      list[i].show = true;
      break;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}

//移除图层数据
function removeLayerVersion(type){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level3DataType==type){
      list[i].show = false;
      break;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}
//选择地震影响场
const seismicInfluenceSelect = (val)=>{
  if(val){
    getInfluenceFieldGeom()
  }else{
    influenceFieldGeomList.value = []
  }
}
const influenceFieldGeomList = ref([])
function getInfluenceFieldGeom() {
  getInfluencefliedById({ versionCode: props.form.influenceFieldVersion }).then(res => {
    influenceFieldGeomList.value = res.data
  }).catch()
}
const dataTypeInfluence = ref('')
//获取查询参数
watch(() => props.form, value => {// watch函数监听props.form
  if(value.assessCode){
    let dataType = props.dataType;
    removeLayerVersion(dataType)
    if(props.form.seismicInputMode1 == '2') {
      dataTypeInfluence.value ='overallRiskZonation'
      getInfluenceFieldGeom()
    }else{
      dataTypeInfluence.value =''
      influenceFieldGeomList.value = []
    }
    //根据类型显示超图图层
    showLayerByDataType(dataType,value);
  }
},{immediate:true, deep: true});

onMounted(() => {
  completeRefreshData.value = true;
})
</script>

<style scoped lang="scss">
.mapDiv {
  // position:absolute;
  top:0px;left:0px;width:100%;height:100%;
}

/*设置选择数据面板*/
.new-settingDiv {
  position:absolute;top:18px;left:110px;width:400px;padding:20px;padding-top: 10px;
  background:rgba(0,27,67,0.7);border-radius:4px;color:white;
}
.new-settingDiv-div1{
  padding-bottom: 10px;
  border-bottom: 1px dashed white;
}
.new-settingDiv .new-p{
  margin-bottom: 10px;
  font-size:14px;
}
.new-settingDiv-div3{
  text-align: center;
}
:deep(.new-settingDiv .el-radio){
  color:white;
}
:deep(.new-settingDiv .el-checkbox){
  color:white;
}
:deep(.new-settingDiv .new-p .el-button){
  position:absolute;right:20px;
}
:deep(.new-settingDiv .el-select){
  width:208px;
}
.new-settingDiv-span {
  float: right;
  line-height: 32px;
  cursor:pointer;
}
.new-settingDiv-span:hover {
  cursor:pointer;
}

/*带三角弹窗*/
.new-popover {
  position: absolute;
  top:0px;
  left:0px;
  padding:10px;
  background: rgba(0,27,67,0.8);
  color:white;
  z-index:100;
}
.new-triangle {
  position: absolute;
  top: 20px;
  left: -19px;
  overflow: hidden;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color:transparent rgba(0,27,67,0.8) transparent transparent;
}

.new-pattenAnalysisDiv {
  position: absolute;top:246px;left:105px;font-size: 14px;
}

.new-pattenAnalysisDiv-button {
  float: left;
  width: 80px;
  text-align: center;
  padding: 5px;
  cursor:pointer;
}
/*规律分析按钮div*/
.showPattenAnalysisDiv img {
  width:25px;
  border:1px dashed white;
}
.showPattenAnalysisDiv-div1 {
  display: inline-block;width:160px;border-bottom: 1px dashed white;padding-bottom: 10px;
}

.new-div-selected {
  background: rgba(16,124,229,0.5);
  border: 1px solid #707070;
}

.areaDialog {
  text-align: center;
  .close {
    text-align: right;
    .el-icon {
      color: #606266;
      padding: 20px 0;
      margin-right: 10px;
      right: 0px;
      font-size: 22px;
    }
  }
  width: 320px;
  position: absolute;
  top: 246px;
  left: 288px;
  background: rgba($color: #fff, $alpha: 0.9);
}

.resultShowButton {
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
}

</style>